<template>
  <div class="accessory-wrap" v-if="list.length>0">
    <el-card>
      <h2>课程文件</h2>
      <el-table :data="list" width="100%">
        <el-table-column label="文件名" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <el-button type="text" @click="downloadFile(scope.row)">{{scope.row | fileName}}</el-button>
          </template>
        </el-table-column>
        <el-table-column label="大小">
          <template slot-scope="scope">{{scope.row.resSize | bytesToSize}}</template>
        </el-table-column>
        <el-table-column label="文件类型">
          <template slot-scope="scope">{{scope.row.resType | fileType}}</template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="downloadFile(scope.row)">下载</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { getCourseAccessory } from "@/api/course";

export default {
  name: "Accessory",
  data() {
    return {
      list: [],
      queryInfo: {
        courseId: this.$route.query.courseId,
        resType: undefined
      }
    };
  },
  filters: {
    bytesToSize(size) {
      if (size < 0.1 * 1024) {
        //小于0.1KB，则转化成B
        size = size.toFixed(2) + "B";
      } else if (size < 0.1 * 1024 * 1024) {
        // 小于0.1MB，则转化成KB
        size = (size / 1024).toFixed(2) + "KB";
      } else if (size < 0.1 * 1024 * 1024 * 1024) {
        // 小于0.1GB，则转化成MB
        size = (size / (1024 * 1024)).toFixed(2) + "MB";
      } else {
        // 其他转化成GB
        size = (size / (1024 * 1024 * 1024)).toFixed(2) + "GB";
      }

      // 转成字符串
      let sizeStr = size + "",
        // 获取小数点处的索引
        index = sizeStr.indexOf("."),
        // 获取小数点后两位的值
        dou = sizeStr.substr(index + 1, 2);

      // 判断后两位是否为00，如果是则删除00
      if (dou == "00")
        return sizeStr.substring(0, index) + sizeStr.substr(index + 3, 2);

      return size;
    },
    fileType(type) {
      return type == 1
        ? "图片"
        : type == 2
        ? "音频"
        : type == 3
        ? "文档"
        : type == 4
        ? "压缩文件"
        : "其它";
    },
    fileName(row) {
      return (
        row.resName +
        "." +
        row.resUrl.substring(row.resUrl.lastIndexOf(".") + 1)
      );
    }
  },
  watch: {
    $route: {
      handler(newV) {
        this.queryInfo.courseId = newV.query.courseId;
      }
    }
  },
  created() {
    this.getAccessory();
  },
  methods: {
    getAccessory() {
      getCourseAccessory(this.queryInfo).then(res => {
        if (res.code == 200) {
          this.list = res.data;
          console.log(this.list);
        }
      });
    },
    downloadFile(row) {
      let splitName = row.resUrl.split(".");
      const a = document.createElement("a");
      a.href = row.resUrl;
      a.target = "_blank";
      a.download = row.resName + "." + splitName[splitName.length - 1]; // 下载后文件名
      a.style.display = "none";
      document.body.appendChild(a);
      a.click(); // 点击下载
      document.body.removeChild(a); // 下载完成移除元素
    }
  }
};
</script>

<style scoped>
.el-card {
  border-radius: 12px !important;
  min-height: 300px;
}
</style>
